import { useState, use, Suspense, useId } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import { Button, Flex, Space } from 'antd'
import configureStore from '@/store/store';
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from '@/store/slice/countSlice'
import { Provider } from 'react-redux';

const getTestApi = (params = '') => {
  return new Promise(resolve => {
    setTimeout(resolve({ value: `use hooks mock data ${params}!` }), 1000);
  });
};

function Message({ promiseValue }) {
  const content = use(promiseValue);
  return <div>{content.value}</div>
};

function CountCalcuate() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  return <Flex style={{ marginTop: 32 }}>
    <Space>
      <Button
        type='dashed'
        aria-label="Increment value"
        onClick={() => dispatch(increment())}
      >
        Increment
      </Button>
      <span>{count}</span>
      <Button
        type='dashed'
        aria-label="Decrement value"
        onClick={() => dispatch(decrement())}
      >
        Decrement
      </Button>
    </Space>
  </Flex>
}

function App() {
  const id = useId();
  const [promise, setPromise] = useState(() => getTestApi());
  const handleRandom = () => {
    setPromise(() => getTestApi(Math.floor(Math.random() * 100 + 1)));
  };

  return (
    <Provider store={configureStore}>
      <Suspense fallback={<div>Loading...</div>}>
        <Message key={id} promiseValue={promise} />
      </Suspense>
      <Button type='primary' onClick={handleRandom} style={{ marginTop: '32px' }}>随机生成</Button>
      <CountCalcuate />
    </Provider>
  )
}

export default App
